<template>
    <div class="game-all-data-box" v-loading="loading">
        <div class="input-box" style="position: relative">
            <span class="input-title" style="margin-left:0px;">日期</span>
            <el-date-picker
                @change="getList(1)"
                v-model="date"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" class="btn" @click="getList(1)">搜索</el-button>
            <!-- <el-button type="success" class="btn" style="position: absolute; right: 10px" @click="exportData">导出</el-button> -->
        </div>
        <div class="table-box">
            <el-table
                :data="list"
                border
                style="width: 100%; margin-top: 20px">
                <el-table-column
                    width="110"
                    label="日期">
                    <template slot-scope="scope">
                        <span>{{scope.row.date | timeInit}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="totalUserSourceDataVoList"
                    label="累计用户"
                    width="160">
                    <template slot-scope="scope">
                        <div v-html="showList(scope.row.totalUserSourceDataVoList)"></div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="activeUser"
                    label="活跃数"
                    width="160">
                    <template slot-scope="scope">
                        <div v-html="showList(scope.row.activeUserSourceDataVoList)"></div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="newAddUser"
                    label="新增"
                    width="160">
                    <template slot-scope="scope">
                        <div v-html="showList(scope.row.newAdduserSourceDataVoList)"></div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="startTime"
                    label="启动趣游戏次数">
                    <template slot-scope="scope">
                        <span>{{scope.row.startTime || '0'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="startGameCount"
                    label="启动游戏次数">
                    <template slot-scope="scope">
                        <span>{{scope.row.startGameCount || '0'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="150"
                    label="应用宝">
                    <template slot-scope="scope">
                        <template v-if="scope.row.applicationTreasureInvite && scope.row.applicationTreasureInvite.length">
                            <div v-for="(item, index) in scope.row.applicationTreasureInvite" :key="index">
                                <!-- <b v-if="item.type === '1.0'">邀请：</b>
                                <b v-else-if="item.type === '2.0'">游戏邀请：</b>
                                <b v-else-if="item.type === '3.0'">视频邀请：</b>
                                <b v-else-if="item.type === '4.0'">用户主页：</b>
                                <b v-else-if="item.type === '5.0'">趣友团：</b>
                                <b v-else-if="item.type === '6.0'">玩家认证：</b>
                                <b v-else>搜索下载：</b> -->
                                <b>{{item.desc}}：</b>
                                <span>{{item.count || 0}}</span>
                            </div>
                        </template>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="试客">
                    <template slot-scope="scope">
                        <template v-if="scope.row.shiKeInvite && scope.row.shiKeInvite.length">
                            <div v-for="(item, index) in scope.row.shiKeInvite" :key="index">
                                <span>{{item.count || 0}}</span>
                            </div>
                        </template>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column
                    width="150"
                    label="官网">
                    <template slot-scope="scope">
                        <template v-if="scope.row.webInvite && scope.row.webInvite.length">
                            <div v-for="(item, index) in scope.row.webInvite" :key="index">
                                <!-- <b v-if="item.type === '1.0'">邀请：</b>
                                <b v-else-if="item.type === '2.0'">游戏邀请：</b>
                                <b v-else-if="item.type === '3.0'">视频邀请：</b>
                                <b v-else-if="item.type === '4.0'">用户主页：</b>
                                <b v-else-if="item.type === '5.0'">趣友团：</b>
                                <b v-else-if="item.type === '6.0'">玩家认证：</b>
                                <b v-else>搜索下载：</b> -->
                                <b>{{item.desc}}：</b>
                                <span>{{item.count || 0}}</span>
                            </div>
                        </template>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="安卓商店">
                    <template slot-scope="scope">
                        <template v-if="scope.row.shopList && scope.row.shopList.length">
                            <div v-for="(item, index) in scope.row.shopList" :key="index">
                                <b>{{item.desc}}：</b>
                                <span>{{item.count || 0}}</span>
                            </div>
                        </template>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
                <el-table-column width="150" label="iOS">
                    <template slot-scope="scope">
                        <template v-if="scope.row.iosInvite && scope.row.iosInvite.length">
                            <div v-for="(item, index) in scope.row.iosInvite" :key="index">
                                <b>{{item.desc}}：</b>
                                <span>{{item.count || 0}}</span>
                            </div>
                        </template>
                        <span v-else>-</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
import { export2Excel } from '@/excel/util'

export default {
    data () {
        return {
            loading: false,
            list: [],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            date: [], // 时间
            totalData: {
                accumulativeUser: 0, // 累计用户数
                activeUser: 0, // 活跃数
                newAddUser: 0, // 新增
                startTime: 0, // 启动趣游戏次数
                startGameCount: 0, // 启动次数
                applicationTreasureInvite: {
                    yaoqing: 0, // 邀请：
                    youxi: 0, // 游戏邀请：
                    shipin: 0, // 视频邀请：
                    zhuye: 0, // 用户主页：
                    quyoutuan: 0, // 趣友团：
                    renzheng: 0, // 玩家认证：
                    weizhi: 0 // 搜索下载：
                }, // 应用宝
                shiKeInvite: 0, // 试客
                webInvite: {
                    yaoqing: 0, // 邀请：
                    youxi: 0, // 游戏邀请：
                    shipin: 0, // 视频邀请：
                    zhuye: 0, // 用户主页：
                    quyoutuan: 0, // 趣友团：
                    renzheng: 0, // 玩家认证：
                    weizhi: 0 // 搜索下载：
                },
                baiDuInvite: 0 // 百度
            }
        }
    },
    created () {
        this.getList(1)
    },

    methods: {
        exportData() {
            this.columns = [{
                title: '日期', key: 'dateDesc'
            },
            {
                title: '累计用户', key: 'userCountDesc'
            },
            {
                title: '活跃数', key: 'hysDesc'
            },
            {
                title: '新增', key: 'xzDesc'
            },
            {
                title: '启动趣游戏次数', key: 'startTime'
            },
            {
                title: '启动游戏次数', key: 'startGameCount'
            },
            {
                title: '应用宝', key: 'yybDesc'
            },
            {
                title: '试客', key: 'skDesc'
            },
            {
                title: '官网', key: 'gwDesc'
            },
            {
                title: '安卓商店', key: 'shopListDesc'
            },
            {
                title: 'iOS', key: 'iosDesc'
            }
            ]
            this.getList(1, true)
        },
        // 导出字符串拼接
        showDataStr (data) {
            let html = ''
            data && data.forEach(item => {
                html += `  ${item.name || item.desc || '-' }：${item.count || '0'}`
            })
            return html
        },
        async getList (num, flag) {
            if (this.loading) return
            this.loading = true
            this.pageNum = num

            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }
            // 导出数据
            if (flag) {
                params.pageSize = 1000000
            }
            if (this.date && this.date.length) {
                params.fromDate = this.date[0]
                params.toDate = this.date[1]
            }

            let res = await this.$http.get('/data/selectUserData', {
                params
            })

            if (res.code === '0') {
                // 重置排序
                res.data && res.data.forEach(item => {
                    item.applicationTreasureInvite.sort((a, b) => {
                        return a.type - b.type
                    })
                    item.webInvite.sort((a, b) => {
                        return a.type - b.type
                    })
                })
                if (flag) {
                    res.data && res.data.forEach(item => {
                        item.dateDesc = formatDate(item.date, 'YYYY-MM-DD')
                        item.userCountDesc = this.showDataStr(item.totalUserSourceDataVoList)
                        item.hysDesc = this.showDataStr(item.activeUserSourceDataVoList)
                        item.xzDesc = this.showDataStr(item.newAdduserSourceDataVoList)
                        item.yybDesc = this.showDataStr(item.applicationTreasureInvite)
                        item.skDesc = this.showDataStr(item.shiKeInvite)
                        item.gwDesc = this.showDataStr(item.webInvite)
                        item.shopListDesc = this.showDataStr(item.shopList)
                        item.iosDesc = this.showDataStr(item.iosInvite)
                    })
                    export2Excel(this.columns, res.data, '数据汇总')
                } else {
                    this.list = res.data
                    this.total = res.count
                }
                // this.computedTotalData()
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 计算合计
        computedTotalData () {
            // 初始化数据 每次重新计算
            this.totalData = {
                accumulativeUser: 0, // 累计用户数
                activeUser: 0, // 活跃数
                newAddUser: 0, // 新增
                startTime: 0, // 启动趣游戏次数
                startGameCount: 0, // 启动次数
                applicationTreasureInvite: {
                    yaoqing: 0, // 邀请：
                    youxi: 0, // 游戏邀请：
                    shipin: 0, // 视频邀请：
                    zhuye: 0, // 用户主页：
                    quyoutuan: 0, // 趣友团：
                    renzheng: 0, // 玩家认证：
                    weizhi: 0 // 搜索下载：
                }, // 应用宝
                shiKeInvite: 0, // 试客
                webInvite: {
                    yaoqing: 0, // 邀请：
                    youxi: 0, // 游戏邀请：
                    shipin: 0, // 视频邀请：
                    zhuye: 0, // 用户主页：
                    quyoutuan: 0, // 趣友团：
                    renzheng: 0, // 玩家认证：
                    weizhi: 0 // 搜索下载：
                },
                baiDuInvite: 0 // 百度
            }

            this.list.forEach((item, index) => {
                if (index === 0) {
                    this.totalData.accumulativeUser = item.accumulativeUser
                }
                this.totalData.activeUser += item.activeUser
                this.totalData.newAddUser += item.newAddUser
                this.totalData.startTime += item.startTime
                this.totalData.startGameCount += item.startGameCount
                item.applicationTreasureInvite.forEach(_item => {
                    switch (_item.type) {
                    case '1.0':
                        this.totalData.applicationTreasureInvite.yaoqing += _item.count
                        break
                    case '2.0':
                        this.totalData.applicationTreasureInvite.youxi += _item.count
                        break
                    case '3.0':
                        this.totalData.applicationTreasureInvite.shipin += _item.count
                        break
                    case '4.0':
                        this.totalData.applicationTreasureInvite.zhuye += _item.count
                        break
                    case '5.0':
                        this.totalData.applicationTreasureInvite.quyoutuan += _item.count
                        break
                    case '6.0':
                        this.totalData.applicationTreasureInvite.renzheng += _item.count
                        break
                    default:
                        this.totalData.applicationTreasureInvite.weizhi += _item.count
                        break
                    }
                })
                item.shiKeInvite.forEach(_item => {
                    this.totalData.shiKeInvite += _item.count
                })
                item.webInvite.forEach(_item => {
                    switch (_item.type) {
                    case '1.0':
                        this.totalData.webInvite.yaoqing += _item.count
                        break
                    case '2.0':
                        this.totalData.webInvite.youxi += _item.count
                        break
                    case '3.0':
                        this.totalData.webInvite.shipin += _item.count
                        break
                    case '4.0':
                        this.totalData.webInvite.zhuye += _item.count
                        break
                    case '5.0':
                        this.totalData.webInvite.quyoutuan += _item.count
                        break
                    case '6.0':
                        this.totalData.webInvite.renzheng += _item.count
                        break
                    default:
                        this.totalData.webInvite.weizhi += _item.count
                        break
                    }
                })
                item.baiDuInvite.forEach(_item => {
                    this.totalData.baiDuInvite += _item.count
                })
            })
        },

        showList (data) {
            let html = ''
            data && data.forEach(item => {
                html += `<p>${item.name}：${item.count || '0'}</p>`
            })
            return html
        },

        sizeChange (val) {
            this.pageSize = val
            this.getList(1)
        },

        pageChange (val) {
            this.getList(val)
        }
    },

    filters: {
        timeInit (val) {
            if (val) {
                return formatDate(val, 'YYYY-MM-DD')
            } else {
                return '-'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .game-all-data-box {
        min-width: 890px;
        .input-box {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 500;
            .input-title {
                margin: 0 10px 0 20px;
            }
            .btn {
                margin-left: 20px;
            }
        }
        .table-box {
            margin-top: 20px;
        }
        .table-total-box {
            margin-bottom: 20px;
            background-color: #F5F7FA;
            border: 1px solid #EBEEF5;
            border-right: none;
            border-top: none;
            display: flex;
            > div {
                flex: 1;
                border-right: 1px solid #EBEEF5;
                display: flex;
                align-items: center;
                padding: 10px;
                font-size: 14px;
                color: rgb(96, 98, 102);
            }
        }

        .tools {
            margin-top: 10px;
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
    }
</style>
